<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>

    
    <script type="text/babel">

        //定义函数模拟组件,返回一个虚拟DOM
        function fpp(){
            console.log(this);
            //返回虚拟DOM
            return <h1>我是函数模拟的组件</h1>
        }

        const root = ReactDOM.createRoot(document.getElementById("app"))
        /*
        如下调用时.汇报浏览器无法识别的警告
        Warning: The tag <fpp> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
        at fpp
        */
        root.render(<fpp />)
        // root.render(App())//开发者工具不会识别/不能使用hooks等组件拥有的虚拟工具
    </script>
</body>
</html>